<template>
	<view>
		<form @submit="formSubmit" >
			<!-- 标题 -->
				<view class="cu-form-group margin-top">
					<view class="title">标题</view>
					<input bindinput="getTitleValue" name="title"  placeholder="品类品牌型号都是买家喜欢搜索的"></input>
				</view>
				<!-- end -->
				
				<!-- 内容 -->
					<view class="cu-form-group margin-top">
						<textarea @tap="getContentValue" name="content"  maxlength="1000"  @input="textareaAInput" placeholder="描述宝贝的转手原因,入手渠道和使用感受"></textarea>
					</view>
					<!-- end -->
					
					<!-- 图片 -->
					<view class="cu-bar bg-white margin-top">
							<view class="action">
								图片上传
							</view>
							<view class="action">
								{{imgList.length}}/5
							</view>
						</view>
						<view class="cu-form-group">
							<view class="grid col-4 grid-square flex-sub">
								<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
									<image :src="imgList[index]" mode='aspectFill'></image>
									<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
										<text class="cuIcon-close"></text>
									</view>
								</view>
								<view class="solids" @tap="ChooseImage" v-if="imgList.length < 1">
									<text class="cuIcon-cameraadd"></text>
								</view>
							</view>
						</view>
					<!-- end -->
					
					<!-- 地址选择 -->
						<view class="cu-form-group">
							<view class="title">地址选择</view>
							<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex"
							 :range="multiArray">
								<view class="picker">
									{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
								</view>
							</picker>
						</view>
					<!-- end -->
					
					<!-- 价钱 -->
						<view class="cu-form-group margin-top">
							<view class="title">出售价:</view>
							<input type="digit" @input="moneyInput" :value="money" placeholder="请输入价钱"  maxlength='7' name="newPrice"></input>
					
							<view class="title">原价:</view>
							<input type="digit" @input="newInput" :value="newMoney" placeholder="请输入原价"  maxlength='7' name="oriPrice"></input>
					
						</view>
					<!-- end -->
					
					<!-- 选择分类  -->
						<view class="cu-form-group">
							<view class="title">分类:</view>
							<input disabled="true"  name="classify" :value='classify'></input>
							<button class="cu-btn  bg-green" role="button" aria-disabled="false" @tap="showModal" data-target="DrawerModalL">选择</button>
						</view>
					<!-- end -->
					
					<!-- 新旧 -->
						<view class="cu-form-group">
							<view class="title">新旧:</view>
								<input disabled="true"  name="itemLists" :value='itemLists[itemListsIndex]'></input>
							<button class="cu-btn  bg-green" role="button" aria-disabled="false" @tap="newState">选择</button>
						</view>
					<!-- end -->
					
					<!-- 交易方式 -->
					  <view class="cu-form-group">
							<view class="title">交易方式</view>
					<checkbox-group name="means" @change="checkboxChange">
					    <checkbox  :class="checkboxs[0].checked?'checked':'' " :checked="checkboxs[0].checked?true:false"  value="自提"  ></checkbox> 自提
					    <checkbox  :class="checkboxs[1].checked?'checked':'' " :checked="checkboxs[1].checked?true:false" 	value='同城面交'></checkbox> 同城面交
					    <checkbox  :class="checkboxs[2].checked?'checked':'' " :checked="checkboxs[2].checked?true:false"  value='邮寄'></checkbox> 邮寄
					</checkbox-group>
					
						</view>
					<!-- end -->
					
					<!-- 确定发布 -->
					<view class="padding flex flex-direction">
					  <button class="cu-btn bg-green margin-tb-sm lg"  form-type="submit">确定发布</button>
					</view>
					<!-- end -->
		</form>
		
		<!-- 模态框 -->
		<view  @touchmove.stop="modeMove" class=" cu-modal drawer-modal justify-start " :class=" modalName == 'DrawerModalL'?'show':'' " @tap="hideModal" >
		  <scroll-view scroll-with-animation='true' scroll-y='true' class="cu-dialog basis-lg" >
		    <view class="cu-list menu text-left">
		      <view class="cu-item " v-for=" (item,index) in  picker" :key="index" @tap="getClassify" :data-name="item.classify_name" :data-value="item.classify_id">
		        <view class="content">
		          <view>{{item.classify_name}}</view>
		        </view>
		      </view>
		    </view>
		  </scroll-view >
		</view>
		
	</view>
</template>

<script>
	import allSchool from "../../../common/allSchool.js";
	export default {
		data() {
			return {
				modalName:'',//模态框开关
				 picker:[
					 {classify_id:1,classify_name:'手机'},
				 ],
				    itemListsIndex:0,//几层新下标（默认全新）
					itemLists: ['全新', '99新', '95新', '85新', '8新'],//几次新
					classify:'其他闲置',//分类选择默认
					money:'',//出售价
					newMoney:'',//原价
				    imgList: [],//图片上传
					multiIndex: [0, 0, 0],//地址选择下标
					    multiArray: [
					      ['北京市', '重庆市', '福建省', '江苏省', '广东省', '辽宁省', '内蒙古', '山西省', '青海省', '四川省', '贵州省', '云南省', '陕西省', '西藏', '宁夏', '新疆', '广西', '海南省', '湖南省', '湖北省', '河南省', '山东省', '江西省', '安徽省', '浙江省', '上海', '黑龙江省', '吉林省', '甘肃省', '天津市', '河北省'],
					      ['北京市'],
					      ['北京大学', '中国人民大学', '清华大学', '北京交通大学', '北京工业大学', '北京航空航天大学', '北京理工大学', '北京科技大学', '北方工业大学', '北京化工大学', '北京工商大学', '北京服装学院', '北京邮电大学', '北京印刷学院', '北京建筑大学', '北京石油化工学院', '北京电子科技学院', '中国农业大学', '北京农学院', '北京林业大学', '北京协和医学院', '首都医科大学', '北京中医药大学', '北京师范大学', '首都师范大学', '首都体育学院', '北京外国语大学', '北京第二外国语学院', '北京语言大学', '中国传媒大学', '中央财经大学', '对外经济贸易大学', '北京物资学院', '首都经济贸易大学', '外交学院', '中国人民公安大学', '国际关系学院', '北京体育大学', '中央音乐学院', '中国音乐学院', '中央美术学院', '中央戏剧学院', '中国戏曲学院', '北京电影学院', '北京舞蹈学院', '中央民族大学', '中国政法大学', '华北电力大学', '中华女子学院', '北京信息科技大学', '中国矿业大学（北京）', '中国石油大学（北京）', '中国地质大学（北京）', '北京联合大学', '北京城市学院', '中国青年政治学院', '首钢工学院', '中国劳动关系学院', '北京吉利学院', '首都师范大学科德学院', '北京工商大学嘉华学院', '北京邮电大学世纪学院', '北京工业大学耿丹学院', '北京警察学院', '北京第二外国语学院中瑞酒店管理学院', '北京工业职业技术学院', '北京信息职业技术学院', '北京电子科技职业学院', '北京京北职业技术学院', '北京交通职业技术学院', '北京青年政治学院', '北京农业职业学院', '北京政法职业学院', '北京财贸职业学院', '北京北大方正软件职业技术学院', '北京经贸职业学院', '北京经济技术职业学院', '北京戏曲艺术职业学院', '北京汇佳职业学院', '北京科技经营管理学院', '北京科技职业学院', '北京培黎职业学院', '北京经济管理职业学院', '北京劳动保障职业学院', '北京社会管理职业学院', '北京艺术传媒职业学院', '北京体育职业学院', '北京交通运输职业学院', '北京卫生职业学院', '北京网络职业学院', '其他']
					    ],//默认选择地址
						region: ['贵州省', '毕节市', '毕节职业技术学院'],//选择地址
						// 交易方式
						checkboxs:[
							{value:"自提",checked:false},
							{value:"同城面交",checked:false},
							{value:"邮寄",checked:false},
						],
			}
		},
		methods: {
		
			// 选择地址
			  MultiChange(e) {
			      this.multiIndex = e.detail.value
			  },
			    MultiColumnChange(e){
			      var that = this;
			      allSchool.all(e,that);
			    },
			  
			  // end
			
			
			  // 图片上传
			  ChooseImage() {
			    uni.chooseImage({
			      count: 5, //默认9
			      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			      sourceType: ['album'], //从相册选择
			      success: (res) => {
			        if (this.imgList.length != 0) {
			            this.imgList.concat(res.tempFilePaths)
			        } else {
			            this.imgList = res.tempFilePaths
			        }
			      }
			    });
			  },
			  ViewImage(e) {
			    uni.previewImage({
			      urls: this.imgList,
			      current: e.currentTarget.dataset.url
			    });
			  },
			  // 删除照片
			  DelImg(e) {
			    uni.showModal({
			      title: '提示',
			      content: '确定要删除这个照片吗？',
			      cancelText: '再看看',
			      confirmText: '删除',
			      success: res => {
			        if (res.confirm) {
			          this.imgList.splice(e.currentTarget.dataset.index, 1);
			            this.imgList = this.imgList
			        }
			      }
			    })
			  },
			  
			    //限制只能到小数点2位
			    moneyInput:function(e){
			      var money;
			      if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证，提现金额小数点后不能大于两位数字
			        money = e.detail.value;
			      } else {
			        money = e.detail.value.substring(0, e.detail.value.length - 1);
			      }
			        this.money = money;
			    },
				
				  //原价验证
				  newInput:function(e){
				    var money;
				    if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证，提现金额小数点后不能大于两位数字
				      money = e.detail.value;
				    } else {
				      money = e.detail.value.substring(0, e.detail.value.length - 1);
				    }
				      this.newMoney = money;
				  },
				  
				  
				    // 选择交易方式
				    checkboxChange:function(e){
						console.log(e);
						//获取选择状态
						var item = this.checkboxs,
							values = e.detail.value;
							for (var i = 0; i < item.length; i++) {
								item[i].checked = false;//初始化选择状态
								for (var j = 0; j < values.length; j++) {
									if(item[i].value == values[j]){
										item[i].checked = true;
										break;
									}
								}
							}
							
						
				    },
					
					  // 新旧程度
					  newState:function(e){
					    var that = this;
					    uni.showActionSheet({
					      itemList: that.itemLists,
					      success(e) {
					          that.itemListsIndex = e.tapIndex
					      }
					    })
					  },
					  // 拦截模态框滚动事件
					    modeMove:function(){
					  
					    },
						
						// 显示分类模态框
						  showModal(e) {
						      this.modalName = e.currentTarget.dataset.target
						  },
						  // 隐藏分类模态框
						  hideModal(e) {
						      this.modalName = null
						  },
						    // 得到分类的值
						    getClassify:function(e){
						        this.classify = e.currentTarget.dataset.name,
						        this.classify_id = e.currentTarget.dataset.value
						      this.hideModal();
						    },
		},
		onLoad(options) {
			
		},
		onShow() {
			
		},
		onHide() {
			
		},
		// 出发下拉刷新
		onPullDownRefresh() {
			// 模拟刷新完成
			setTimeout(function(){
				uni.stopPullDownRefresh();
			},2000);
		}
	}
</script>

<style>
.rule{
  display: flex;
  justify-content: space-between;
}
.margin-top-xl-170{
  margin-top: 170rpx;
}
</style>
